<template>
  <div class="page">
    <div class="applicant-title">投保人</div>
    <van-form>
      <van-cell-group>
        <van-field
          v-model="applicant.name"
          name="姓名"
          label="姓名"
          placeholder="姓名"
          required
          input-align="right"
          :rules="[{ required: true, message: '请填写姓名' }]"
        />
        <van-field
          v-model="applicant.type"
          is-link
          readonly
          name="证件类型"
          label="证件类型"
          required
          input-align="right"
          placeholder="点击选择证件类型"
          @click="typeShowPicker = true"
        />
        <van-field
          v-model="applicant.id"
          name="身份证号"
          label="身份证号"
          placeholder="请输入您的身份证号"
          required
          input-align="right"
          :rules="[{ required: true, message: '请填写用身份证号' }]"
        />
        <van-field
          v-model="applicant.phone"
          type="text"
          name="手机号"
          label="手机号"
          placeholder="手机号"
          required
          input-align="right"
          :rules="[{ required: true, message: '请填写手机号' }]"
        />
        <van-field
          v-model="applicant.email"
          type="text"
          name="邮箱"
          label="邮箱"
          placeholder="邮箱"
          input-align="right"
        />
      </van-cell-group>
    </van-form>
    <div class="insured">
      <div class="title">被保险人</div>
      <div class="text">同投保人</div>
      <div class="switch"><van-switch v-model="checked" /></div>
    </div>
    <van-form v-if="!checked">
      <van-cell-group>
        <van-field
          v-model="insured.name"
          name="姓名"
          label="姓名"
          placeholder="姓名"
          required
          input-align="right"
          :rules="[{ required: true, message: '请填写姓名' }]"
        />
        <van-field
          v-model="insured.type"
          is-link
          readonly
          required
          input-align="right"
          name="证件类型"
          label="证件类型"
          placeholder="点击选择证件类型"
          @click="typeShowPicker = true"
        />
        <van-field
          v-model="insured.id"
          name="身份证号"
          label="身份证号"
          placeholder="请输入您的身份证号"
          required
          input-align="right"
          :rules="[{ required: true, message: '请填写用身份证号' }]"
        />
        <van-field
          v-model="insured.phone"
          type="text"
          name="手机号"
          label="手机号"
          placeholder="手机号"
          required
          input-align="right"
          :rules="[{ required: true, message: '请填写手机号' }]"
        />
        <van-field
          v-model="insured.email"
          type="text"
          name="邮箱"
          label="邮箱"
          placeholder="邮箱"
          input-align="right"
        />
      </van-cell-group>
    </van-form>
    <van-form>
      <van-cell-group>
        <van-field
          v-model="info.address"
          name="保险财产地址"
          label="保险财产地址"
          placeholder="详细地址，精确到门牌号"
          required
          input-align="right"
          :rules="[{ required: true, message: '请填写保险财产地址' }]"
        />
        <van-field
          v-model="info.date"
          is-link
          readonly
          required
          input-align="right"
          name="保障期间"
          label="保障期间"
          placeholder="请选择保障期间"
          @click="dateShowPicker = true"
          :rules="[{ required: true, message: '请填写保险财产地址' }]"
        />
        <van-field
          v-model="info.startTime"
          is-link
          readonly
          name="calendar"
          input-align="right"
          label="保险起期"
          placeholder="点击选择保险开始日期"
          @click="startShowCalendar = true"
        />
        <van-field
          v-model="info.endTime"
          is-link
          readonly
          name="calendar"
          input-align="right"
          label="保险止期"
          placeholder="点击选择保险结束日期"
          @click="endShowCalendar = true"
        />
        <van-field name="checkbox" class="clause">
          <template #input>
            <van-checkbox v-model="agree" shape="square">
              我已阅读
              <a href="#">投保须知</a>、 <a href="#">保险条款</a>、
              <a href="#">理赔指引</a>、
              <a href="#">免责告知</a>、并通知所述内容
            </van-checkbox>
          </template>
        </van-field>
      </van-cell-group>
    </van-form>
    <div class="bottom">
      <van-button
        class="btn"
        type="primary"
        :style="{ background: '#417eee', color: '#fff' }"
        >主要按钮</van-button
      >
      <van-button class="btn" :style="{ background: '#f6a820', color: '#fff' }">
        <img
          src="wwwmsb.cpiccdn.com/cxNew/msb/common/images/junan/icon.png"
          alt=""
        />
        {{ price }}元
      </van-button>
    </div>
    <van-popup v-model:show="typeShowPicker" position="bottom">
      <van-picker
        :columns="typeColumns"
        @confirm="typeOnConfirm"
        @cancel="typeShowPicker = false"
      />
    </van-popup>
    <van-popup v-model:show="dateShowPicker" position="bottom">
      <van-picker
        :columns="dateColumns"
        @confirm="dateOnConfirm"
        @cancel="dateShowPicker = false"
      />
    </van-popup>

    <van-calendar v-model:show="startShowCalendar" @confirm="startOnConfirm" />

    <van-calendar v-model:show="endShowCalendar" @confirm="endOnConfirm" />
  </div>
</template>

<script type="text/ecmascript-6">
import moment from "moment";
export default {
  data() {
    return {
      agree:false,
      price: 25,
      applicant: {
        name: "",
        phone: "",
        id: "",
        type: "",
        email: "",
      },
      checked: true,
      insured: {
        name: "",
        phone: "",
        id: "",
        type: "",
        email: "",
      },
      info: {
        address: "",
        date: "",
        startTime: "",
        endTime: "",
      },
      typeShowPicker: false,
      dateShowPicker: false,
      typeColumns: ["身份证"],
      dateColumns: ["一年期", "二年期", "三年期", "四年期"],
      startShowCalendar: false,
      endShowCalendar: false,
    };
  },
  methods: {
    typeOnConfirm(value) {
      this.applicant.type = value;
      this.insured.type = value;

      this.typeShowPicker = false;
    },
    dateOnConfirm(value) {
      this.info.date = value;
      this.dateShowPicker = false;
    },
    startOnConfirm(value) {
      this.info.startTime = moment(value).format("YYYY-MM-DD");
      this.startShowCalendar = false;
    },
    endOnConfirm(value) {
      this.info.endTime = moment(value).format("YYYY-MM-DD");
      this.endShowCalendar = false;
    },
  },
};
</script>

<style scoped lang="less">
.page {
  .applicant-title {
    font-size: 16px;
    padding: 12px;
  }
  .insured {
    padding: 12px;

    font-size: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .clause{
  }
  .bottom {
    width: 100%;
    //   padding:0 12px;
    position: fixed;
    bottom: 0;
    .btn {
      width: 50%;
    }
  }
}
</style>
